<template>
    <div class="password-reset-container">
      <h2>重置密码</h2>
      <form @submit.prevent="resetPassword">
        <div class="form-group">
          <label for="oldPassword">当前密码</label>
          <input 
            type="admin" 
            id="admin" 
            v-model="form.oldPassword"
            required
          >
        </div>
        
        <div class="form-group">
          <label for="newPassword">新密码</label>
          <input 
            type="password" 
            id="newPassword" 
            v-model="form.newPassword"
            required
            :class="{ 'is-invalid': errors.newPassword }"
          >
          <div class="invalid-feedback" v-if="errors.newPassword">
            {{ errors.newPassword }}
          </div>
        </div>
        
        <div class="form-group">
          <label for="confirmPassword">确认新密码</label>
          <input 
            type="password" 
            id="confirmPassword" 
            v-model="form.confirmPassword"
            required
            :class="{ 'is-invalid': errors.confirmPassword }"
          >
          <div class="invalid-feedback" v-if="errors.confirmPassword">
            {{ errors.confirmPassword }}
          </div>
        </div>
        
        <button type="submit" :disabled="loading">
          {{ loading ? '处理中...' : '确认修改' }}
        </button>
      </form>
      
      <div v-if="message" :class="['message', messageType]">
        {{ message }}
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import axios from 'axios'
  
  const router = useRouter()
  const loading = ref(false)
  const message = ref('')
  const messageType = ref('')
  const errors = reactive({})
  
  const form = reactive({
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
  })
  
  const validateForm = () => {
    let isValid = true
    errors.newPassword = ''
    errors.confirmPassword = ''
    
    // 密码长度验证
    if (form.newPassword.length < 8) {
      errors.newPassword = '密码长度至少需要8个字符'
      isValid = false
    }
    
    // 密码复杂度验证
    const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/
    if (!passwordRegex.test(form.newPassword)) {
      errors.newPassword = '密码需要包含字母、数字和特殊字符'
      isValid = false
    }
    
    // 密码匹配验证
    if (form.newPassword !== form.confirmPassword) {
      errors.confirmPassword = '两次输入的密码不匹配'
      isValid = false
    }
    
    return isValid
  }
  
  const resetPassword = async () => {
    if (!validateForm()) return
    
    loading.value = true
    message.value = ''
    messageType.value = ''
    
    try {
      const response = await axios.post('/api/auth/reset-password', {
        oldPassword: form.oldPassword,
        newPassword: form.newPassword
      }, {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        }
      })
      
      message.value = '密码重置成功，请使用新密码登录'
      messageType.value = 'success'
      
      // 重置成功后清空表单
      form.oldPassword = ''
      form.newPassword = ''
      form.confirmPassword = ''
      
      // 5秒后跳转到登录页面
      setTimeout(() => {
        router.push('/login')
      }, 5000)
    } catch (error) {
      if (error.response) {
        message.value = error.response.data.message || '密码重置失败'
        messageType.value = 'error'
        
        // 处理特定错误
        if (error.response.status === 401) {
          message.value = '当前密码不正确'
        }
      } else {
        message.value = '网络错误，请稍后再试'
        messageType.value = 'error'
      }
    } finally {
      loading.value = false
    }
  }
  </script>
  
  <style scoped>
  .password-reset-container {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .form-group {
    margin-bottom: 15px;
  }
  
  label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
  }
  
  input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  input.is-invalid {
    border-color: #dc3545;
  }
  
  .invalid-feedback {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
  }
  
  button {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  button:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
  }
  
  button:hover:not(:disabled) {
    background-color: #0056b3;
  }
  
  .message {
    margin-top: 15px;
    padding: 10px;
    border-radius: 4px;
  }
  
  .success {
    background-color: #d4edda;
    color: #155724;
  }
  
  .error {
    background-color: #f8d7da;
    color: #721c24;
  }
  </style>  